<template>
  <el-dialog
    custom-class="adup-leave-type"
    v-el-drag-dialog="{ drag: true, full: false, resize: false }"
    :title="title"
    :close-on-click-modal="false"
    :visible="true"
    @close="closeMd"
    append-to-body
    :width="'400px'">
    <div
      v-if="myData.pobj"
      style="padding: 10px; margin-left: 80px; font-weight: 900">
      你已经选择父级类型【{{myData.pobj.typeName}}】
    </div>

    <el-form 
      :model="fm.ps" 
      :ref="fm.fname" 
      :label-width="'100px'"
      @keyup.enter.native="onSubmit">
      <el-form-item
        label="类型名称"
        prop="typeName"
        :rules="[
          { required: true, message: '请输入类型名称', trigger: 'blur' },
        ]">
        <el-input
          v-model="fm.ps.typeName"
          placeholder="请输入类型名称">
        </el-input>
      </el-form-item>

      <el-form-item 
        label="类型说明" 
        prop="note">
        <el-input
          v-model="fm.ps.note"
          placeholder="类型说明"
          type="textarea">
        </el-input>
      </el-form-item>

      <el-form-item>
        <el-button 
          type="primary" 
          @click="onSubmit" 
          :loading="fm.sb.load">
          {{fm.sb.text}}
        </el-button>

        <el-button @click="closeMd">关闭</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import elDragDialog from "@/directive/el-drag-dialog";

import * as systemSer from "@/api/services/system.service";

export default {
  name: "AdupLeaveType",
  directives: { elDragDialog },
  props: {myData: Object},
  data() {
    return {
      title: this.myData.obj ? "修改-请假类型" : "新增-请假类型",
      fm: {
        fname: "adupLeaveTypeFm",
        sb: {load: false, text: this.myData.obj ? '修改' : '新增'},
        ps: {
          // 修改id
          uid: this.myData?.obj?.id || '',
          // 父级id
          pid: this.myData?.pobj?.id || '',
          // 请假类型名称
          typeName: '',
          // 请假类型说明
          note: '',
        },
      },
    };
  },
  created() {
    this.init();
  },
  methods: {
    /* 关闭弹框 */
    closeMd() {
      this.$emit("myClick", {state: false});
    },
    // 准备数据
    init() {
      let that = this;
      
      let o = that.myData.obj;
      if(o){// 回填修改数据
        let ps = {
          // 修改对象id
          uid: o.id,
          // 父级id
          pid: o.pid,
          // 请假类型名称
          typeName: o.typeName,
          // 请假类型备注
          note: o.note,
        };
        that.fm.ps = ps;
      }
    },

    /**
     * 提交表单
     */
    onSubmit() {
      let that = this, U = that.U, fm = that.fm, sb = fm.sb, ps = U.scopy(fm.ps);
      
      that.$refs[fm.fname].validate((valid) => {
        if (!valid) { return false; } else {
          sb.load = true;

          systemSer.adupLeaveType(ps).then((res) => {
            sb.load = false;

            if (res.code !== 1) {
              U.qerror(res.msg);
            } else {
              U.qsuccess(res.msg);

              that.closeMd();
              // 调用父组件方法-重新加载数据
              that.$emit("reloadDg");
            }
          });

          setTimeout(() => { sb.load = false; }, 10000);
        }
      });
    },

  },
};
</script>